/**
 * 车道list
 * @author xiaoxujs
 */

import { Button, ConfigProvider, message, Table, TableProps, Tooltip } from "antd";
import { TableBox } from "../../style";
import ChedaoAddChangeModule from "../ChedaoAddChangeModule";
import ChedaoChangeModule from "../ChedaoChangeModule";
import { FC, useCallback, useEffect, useState } from "react";
import { IBaseLaneList } from "../../../../type/chedaoweihu";
import { useWindowFontSize } from "../../../../assets/fun/Antd/configprovider";
import { getBaseLaneList } from "../../api";
import { INoFenye } from "../../../../type/commit";


const ChedaoList:FC<{
    listData: IBaseLaneList[];
    setListData: React.Dispatch<React.SetStateAction<IBaseLaneList[]>>
}> = ({
    listData,
    setListData
}) => {

    const [chedaoAddChangeShow, setChedaoAddChangeShow] = useState(false); //添加车道弹窗
    const [chedaoChangeShow, setChedaoChangeShow] = useState(false); //添加车道弹窗
    const [clickData, setClickData] = useState<IBaseLaneList>(); //点击数据


    const [tableLoading, setTableLoading] = useState(false); //tableLoading

    const listFun = useCallback(async () => {
        setTableLoading(true);
        const { code, msg, data } = (await getBaseLaneList()) as INoFenye<IBaseLaneList>;
        if (code === 20000) {
            setListData(data);
            setTableLoading(false);
        } else {
            message.error(msg);
        }
    }, [setListData]);
    useEffect(() => {
        listFun();
    }, [listFun])


    //  添加车道维护
    const handleChedaoAddChangeCallback = () => {
        setChedaoAddChangeShow(false);
        listFun();
    }
    //  编辑车道维护
    const handleChedaoChangeCallback = () => {
        setChedaoChangeShow(false);
        setClickData(undefined);
        listFun();
    }
    const columns: TableProps<IBaseLaneList>['columns'] = [
        {
            title: '序号',
            align: 'center',
            render: (_, record, index) => <span>{index + 1}</span>
        },
        {
            title: '车道ID',
            dataIndex: 'laneId',
            align: 'center',
        },
        {
            title: '车道名称',
            dataIndex: 'laneName',
            align: 'center',
        },
        {
            title: <div>排队车辆 <Tooltip title="排队车辆为0时才可编辑车道名称"><span className="iconfont" style={{marginLeft: '1rem', cursor: 'pointer'}}>&#xe619;</span></Tooltip></div>,
            dataIndex: 'num',
            align: 'center',
        },
        {
            title: '操作',
            dataIndex: 'address',
            align: "center",
            render: (_, record) => <>
                <Button type="link" onClick={() => {
                    if(Number(record.num) === 0) {
                        setClickData(record);
                        setChedaoChangeShow(true);
                    }else{
                        message.warning('当前车道还有车无法修改')
                    }
           
                }} >编辑车道名称</Button>
            </>
        },
    ];
    return <TableBox>
        <div className="table_title_Box">
            <div className="table_title_text">车道维护</div>
            <Button
                type='primary'
                icon={<span className="iconfont">&#xe620;</span>}
                onClick={() => setChedaoAddChangeShow(true)}
            >
                添加车道
            </Button>

        </div>
        <ConfigProvider theme={{
            components: {
                Table: {
                    headerColor: '#8B9BAC',
                    cellFontSize: useWindowFontSize(14),
                    cellPaddingBlock: 7
                }
            }
        }}>
            <Table<IBaseLaneList>
                pagination={false}
                rowKey='id'
                columns={columns}
                dataSource={listData}
                loading={tableLoading}
            />
        </ConfigProvider>
        <ChedaoAddChangeModule open={chedaoAddChangeShow} handleCallback={handleChedaoAddChangeCallback} />
        <ChedaoChangeModule open={chedaoChangeShow} clickData = {clickData}  handleCallback={handleChedaoChangeCallback} />
    </TableBox>
}

export default ChedaoList;